<template>
  <!-- 右侧 -->
  <div class="material_right ml_30">
    <div class="mlr_40 mt_30">
      <!-- title -->
      <div class="dis_f pb_29 bor_bottom">
        <div class="actives ml_7"></div>
        <div class="color_333 font_18">修改密码</div>
      </div>
      <!--  -->
      <div class="password">
        <div class="mt_50">
          <div class="password_title mt_10 font_14 color_333">
            <span class="color_F1616">*</span>
            &nbsp; &nbsp; &nbsp; 旧密码:
          </div>
          <div class="mt_10">
            <el-input size="small" v-model="input1" placeholder="请输入内容"></el-input>
          </div>
          <div class="password_title mt_10 font_14 color_333">
            <span class="color_F1616">*</span>
            &nbsp; &nbsp; &nbsp;
            新密码:
          </div>
          <div class="mt_10">
            <el-input size="small" v-model="input2" placeholder="请输入内容" show-password></el-input>
          </div>
          <div class="password_title mt_10 font_14 color_333">
            <span class="color_F1616">*</span>
            &nbsp; &nbsp; &nbsp;
            重复密码:
          </div>
          <div class="mt_10">
            <el-input size="small" v-model="input3" placeholder="请输入内容" show-password></el-input>
          </div>
        </div>
        <!-- button -->
        <div style="margin:auto;width:300px">
          <button class="buttonsubmit">保存</button>
        </div>
      </div>
      <!--  -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input1: "",
      input2: "",
      input3: ""
    };
  },
  methods: {}
};
</script>

<style scoped lang='less'>
.buttonsubmit {
  width: 76px;
  height: 34px;
  background: rgba(39, 164, 254, 1);
  color: #fff;
  display: block;
  text-align: center;
  margin: auto;
  margin-top: 40px;
  border: none;
}
.password_title {
  width: 100px;
}
.password {
  width: 299px;
  margin: auto;
}
.color_F1616 {
  color: #ff1616;
}
.ml_10 {
  margin-left: 10px;
}
.color_999 {
  color: #999;
}
.ml_23 {
  margin-left: 23px;
}
.ml {
  margin-left: 10px;
}
.color {
  color: #27a4fe;
}
.font_14 {
  font-size: 14px;
}
.color_666 {
  color: #666;
}
.bj {
  background: #f3f3f3;
  overflow: hidden;
  padding-bottom: 34px;
}
.mt_30 {
  margin-top: 30px;
}
.material_left {
  height: 565px;
  background: rgba(255, 255, 255, 1);
  overflow: hidden;
}
.portrait_images {
  width: 74px;
  height: 85px;
  margin: auto;
  border: 1px solid;
  margin-top: 30px;
}
.telephone {
  font-size: 16px;
  color: #444343;
  margin-top: 17px;
  text-align: center;
}
.text {
  color: #999;
  font-size: 12px;
  text-align: center;
  font-weight: 500;
}
.edit_img {
  text-align: center;
  padding-top: 11px;
}
.el-menu-item.is-active {
  color: #27a4fe;
  border-left: 2px solid #27a4fe;
  background: rgba(39, 164, 254, 0.1);
}
.ml_7 {
  margin-right: 7px;
}
.mt_50 {
  margin-top: 50px;
}
.el-menu-item {
  text-align: center;
}
.material_right {
  height: 565px;
  background: rgba(255, 255, 255, 1);
  overflow: hidden;
}
.mlr_40 {
  margin-left: 40px;
  margin-right: 40px;
}
.actives {
  width: 4px;
  height: 18px;
  background: rgba(39, 164, 254, 1);
  margin-top: 4px;
}
.dis_f {
  display: flex;
}
.pb_29 {
  padding-bottom: 29px;
}
.bor_bottom {
  border-bottom: 1px dashed rgba(153, 153, 153, 0.1);
}
.color_333 {
  color: #333;
}
.font_18 {
  font-size: 18px;
}
.font_16 {
  font-size: 16px;
}
.dis_f_j_b {
  display: flex;
  justify-content: space-between;
}
.mt_38 {
  margin-top: 30px;
}
.mt_10 {
  margin-top: 10px;
}
.ma_button {
  width: 88px;
  height: 34px;
  border: 1px solid rgba(39, 164, 254, 1);
  color: #27a4fe;
  line-height: 34px;
  text-align: center;
}
</style>